<template>
	<view class="bg">
		<view class="login">
			<view class="logo">
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711519285151545.png" mode="aspectFill"></image>
			</view>
			<view class="wx-login" @click="wx_login">
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/login_weixin.png" mode=""></image>微信登录
			</view>
			<view class="yzm-login" @click="phone_login">
				<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/login_phone.png" mode=""></image> 手机登录
			</view>
		</view>

		<view class="bottom">
			版本号：V{{version}}
		</view>
	</view>
</template>

<script>
	// import {
	// 	zim
	// } from '@/zim/index.js';
	import {
		generateToken
	} from '@/im/js/config.js';
	export default {
		data() {
			return {
				version: '',
				phone: ''
			}
		},
		onLoad() {
			const info = uni.getSystemInfoSync()
			this.version = info.appWgtVersion
		},
		methods: {
			async phone_login() {
				this.nav_to('/pages/start/phone')
			},
			async wx_login() {
				//如果已经手机号登录过，则以手机号为准
				let mobile = uni.getStorageSync('app_user_mobile')
				
				let _this = this;
				uni.login({
					provider: 'weixin',
					onlyAuthorize: true,
					async success(loginRes) {
						uni.showLoading({
							mask: true
						})

						let res = await _this.$api.post('/User/WXAppLogin', {
							code: loginRes.code,
							mobile:mobile
						})

						uni.hideLoading();
						if (res) {
							uni.setStorageSync('xj_token', res.data.Token);


							let user = res.data.UserData;

							uni.setStorageSync('user', user);
							let zimUser = {
								userID: user.UserID + "",
								userName: user.Name,
							}
							let zimToken = generateToken(zimUser.userID)
							let userAvatarUrl = user.HeadImgUrl;
							uni.setStorageSync('zimData', JSON.stringify({
								zimUser,
								zimToken,
								userAvatarUrl
							}))
							zim.login(zimUser, zimToken, userAvatarUrl).then(() => {
								console.log('isLogin vue   uni.login  zim登录成功');
								_this.$store.commit('login', true);
							}).catch((err)=>{
								console.log('isLogin vue   uni.login  zim登录失败',err);
							})
							uni.switchTab({
								url: '/pages/tab/assistant'
							})
						}
						// 登录成功
						uni.getUserInfo({
							provider: 'weixin',
							success: function(info) {
								// console.log(11111)
								console.log(info) //用户信息


							}
						})
					},
					fail: function(err) {
						console.log(err)
						// 登录授权失败  
						// err.code是错误码
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	body,
	html {
		width: 100%;
		height: 100vh;
	}

	.bg {
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.bottom {
		color: #cacaca;
		font-size: 22rpx;
		position: absolute;
		bottom: 70rpx;
		width: 100%;
		text-align: center;
		margin: 0;
	}

	.login {
		box-sizing: border-box;
		padding: 180rpx 88rpx 0 88rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.logo {
			width: 512rpx;
			height: 512rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.title {
			width: 100%;
			height: 100%;
			overflow-wrap: break-word;
			color: rgba(10, 10, 10, 1);
			font-size: 32px;
			font-family: PingFang-SC-Medium;
			font-weight: NaN;
			text-align: left;
			white-space: nowrap;
			line-height: 80rpx;
			margin: 80rpx 0;
		}

		.phone {
			width: 100%;
			height: 80rpx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid rgba(10, 10, 10, 0.1);

			text {
				color: #000;
			}

			.line {
				margin: 0 20rpx;
				color: #999;
			}

			input {
				width: 400rpx;
				color: #333333;
			}
		}

		.yzm-login {
			width: 100%;
			box-sizing: border-box;
			box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
			background-image: linear-gradient(225deg, rgba(2, 2, 2, 0.9) 0, rgba(54, 54, 54, 0.9) 100%);
			border-radius: 6px;
			margin-top: 40rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 5rpx;
			}
		}

		.wx-login {
			width: 100%;
			box-shadow: 0px 4px 10px 0px rgba(46, 46, 46, 0.4);
			border-radius: 6px;
			text-align: center;
			margin-top: 30rpx;
			color: #6bcc03;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90rpx;

			image {
				width: 60rpx;
				height: 60rpx;
				margin-right: 5rpx;
			}
		}
	}
</style>